<template>
	<div class="area-select-model">
		<el-select v-model="data.proviceId" placeholder="省" @change="changeProvince">
			<el-option v-for="item in provinceList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
		</el-select>
		<el-select v-model="data.cityId" placeholder="市" @change="changeCity">
			<el-option v-for="item in cityList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
		</el-select>
		<el-select v-model="data.townId" placeholder="区">
			<el-option v-for="item in townList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
		</el-select>
	</div>
</template>

<script>
	import ajax from 'common/ajax.js'
	import ajaxUrls from 'common/ajaxUrls.js'
	import getUrlPara from 'common/getUrlPara.js'

	export default{
	    props: ['value', 'labelName'],
		data(){
			return{
			    isUpdate: false,
			    data: this.value,
                provinceList : [],
                cityList : [],
                townList : [],
			}
		},
		watch: {
		    data: {
                handler: function(val, oldval){
                    this.$emit('input', val);
				},
				deep: true
			}
		},
		mounted(){
            this.getProvinceList();
            this.getCityList();
            this.getTownList();
		},
		methods: {
		    update(data){
                this.isUpdate = true;
                this.data = data;
			},
            changeProvince(){
                if(!this.isUpdate){this.data.cityId = '';}
                this.cityList = [];
                return this.getCityList();
            },
            changeCity(){
                if(!this.isUpdate){this.data.townId = '';}
                this.townList = [];
                return this.getTownList();
            },
            getProvinceList(){
                return this.getAreaData(1, -1).then(data => {
                    this.provinceList = data.data.items;
                })
            },
            getCityList(){
                if(!this.data.proviceId){
                    this.cityList = [];
                    return;
                }
                return this.getAreaData(2, this.data.proviceId).then(data => {
                    this.cityList = data.data.items;
                })
            },
            getTownList(){
                if(!this.data.cityId){
                    this.townList = [];
                    return;
                }
                this.getAreaData(3, this.data.cityId).then(data => {
                    this.townList = data.data.items;
                    this.isUpdate = false;
                })
            },
            getAreaData(type, id){
                return ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.reports,
                    action: 'qryReportOrg',
                    data: {
                        orgType: type,
                        parentOrgId: id
                    }
                })
            },
		}
	}
</script>

<style lang="scss">
	.area-select-model{
		.el-select{
			display: inline-block;
			width: 110px;
		}
	}
</style>